<template>
  <div style="margin-top:30px;">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px">
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="公司名称" prop="name" style="margin-right:15px">
              <el-input v-model="form.name" placeholder="请输入公司名称" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="公司标记" prop="identity" style="margin-right:15px">
              <el-input v-model="form.identity" placeholder="请输入公司标记" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="公司地址" prop="address" style="margin-right:15px">
              <el-input v-model="form.address" placeholder="请输入公司地址" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="网址" prop="wwwUrl" style="margin-right:15px">
              <el-input v-model="form.wwwUrl" placeholder="请输入网址" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="电话" prop="phone" style="margin-right:15px">
              <el-input v-model="form.phone" placeholder="请输入电话" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="手机" prop="telephone" style="margin-right:15px">
              <el-input v-model="form.telephone" placeholder="请输入手机" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="备案号" prop="beianNumber" style="margin-right:15px">
              <el-input v-model="form.beianNumber" placeholder="请输入备案号" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="邮箱" prop="mailbox" style="margin-right:15px">
              <el-input v-model="form.mailbox" placeholder="请输入邮箱" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="工信号" prop="beianProvince" style="margin-right:15px">
              <el-input type="textarea" :rows="3" v-model="form.beianProvince" placeholder="请输入工信号" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="公司概况" prop="overviews" style="margin-right:15px">
              <myEditor v-model="form.overviews" :disabled="false" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="企业文化" prop="culture" style="margin-right:15px">
              <myEditor v-model="form.culture" :disabled="false" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item label="我们承诺" prop="promise" style="margin-right:15px">
              <myEditor v-model="form.promise" :disabled="false" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="公司logo" prop="logoImg" style="margin-right:15px">
              <el-upload
                v-model="form.logoImg"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleLogoSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.logoImg" :src="form.logoImg" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="微信公众号二维码图片地址" prop="wechatUrl" style="margin-right:15px">
              <el-upload
                v-model="form.wechatUrl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleWechatSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.wechatUrl" :src="form.wechatUrl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商端app二维码" prop="shipperUrl" style="margin-right:15px">
              <el-upload
                v-model="form.shipperUrl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleShipperSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.shipperUrl" :src="form.shipperUrl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="入驻商端app-ios二维码" prop="shipperIosurl" style="margin-right:15px">
              <el-upload
                v-model="form.shipperIosurl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleShipperIosSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.shipperIosurl" :src="form.shipperIosurl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="司机端app二维码" prop="driverUrl" style="margin-right:15px">
              <el-upload
                v-model="form.driverUrl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleDriverSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.driverUrl" :src="form.driverUrl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="司机端app-ios二维码" prop="driverIosurl" style="margin-right:15px">
              <el-upload
                v-model="form.driverIosurl"
                list-type="picture-card"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleDriverIosSuccess"
                :before-upload="beforeImgUpload"
                :headers="getAuthorization()"
              >
                <img v-if="form.driverIosurl" :src="form.driverIosurl" class="el-upload-list__item-thumbnail" width="100%" height="100%">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmit">确 定</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import request from '@/utils/request'
import myEditor from '@/components/MyEditor'
import { isURL, isEmail, isCellphone } from '@/utils/validate4Form'
Vue.use(VXETable)
export default {
  name: 'SiteEdit',
  components: {
    myEditor
  },
  data() {
    return {
      uploadUrl: this.BASE_API_URL + 'ntocc-tps-api/fileUpload',
      form: {
        code: '',
        branchCode: '',
        identity: '',
        name: '',
        city: '',
        address: '',
        overviews: '',
        culture: '',
        promise: '',
        phone: '',
        logoImg: '',
        wwwUrl: '',
        shipperUrl: '',
        shipperIosurl: '',
        driverUrl: '',
        driverIosurl: '',
        yunyingUrl: '',
        telephone: '',
        mailbox: '',
        beianProvince: '',
        beianNumber: '',
        wechatUrl: '',
        bigdataTitleImg: ''
      },
      rules: {
        identity: [
          { required: true, message: '请输入公司标记', trigger: 'blur' },

        ],
        name: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },

        ],
        city: [
          { required: true, message: '请输入所在城市', trigger: 'blur' },

        ],
        address: [
          { required: true, message: '请输入公司地址', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        wwwUrl: [
          { required: true, message: '请输入网址', trigger: 'blur' },
          { validator: isURL, trigger: 'blur' },
          { min: 1, max: 120, message: '长度在 1 到 120 个字符', trigger: 'blur' }
        ],
        overviews: [
          { min: 1, max: 2000, message: '长度在 1 到 2000 个字符', trigger: 'blur' }
        ],
        culture: [
          { min: 1, max: 10000, message: '长度在 1 到 10000 个字符', trigger: 'blur' }
        ],
        promise: [
          { min: 1, max: 10000, message: '长度在 1 到 10000 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },

        ],
        telephone: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { validator: isCellphone, trigger: 'blur' },

        ],
        mailbox: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: isEmail, trigger: 'blur' },

        ],
        beianProvince: [
          { required: true, message: '请输入工信号', trigger: 'blur' },

        ],
        beianNumber: [
          { required: true, message: '请输入备案号', trigger: 'blur' },

        ],
        logoImg: [
          { required: true, message: '请上传公司logo', trigger: 'blur' }
        ],
        shipperUrl: [
          { required: true, message: '请上传入驻商端app二维码', trigger: 'blur' }
        ],
        shipperIosurl: [
          { required: true, message: '请上传入驻商端app-ios二维码', trigger: 'blur' }
        ],
        driverUrl: [
          { required: true, message: '请上传司机端app二维码', trigger: 'blur' }
        ],
        driverIosurl: [
          { required: true, message: '请上传司机端app-ios二维码', trigger: 'blur' }
        ],
        wechatUrl: [
          { required: true, message: '请上传微信公众号二维码', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const site = await this.getInfo()
    if (site) {
      this.form = site
    }
  },
  methods: {
    getInfo() {
      return request({ url: `/arpa-basic-api/site/one`, method: 'get' }).then(response => {
        return response.data
      })
    },
    // 提交
    funcSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const data = this.form
          const rLoading = this.openLoading();
          if (data.code) {
            request({ url: '/arpa-basic-api/site', method: 'put', data }).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
            })
          } else {
            request({ url: '/arpa-basic-api/site', method: 'post', data }).then(response => {
              rLoading.close();
              this.$message({ message: response.msg, type: 'success' })
            })
          }
        } else {
          return false
        }
      })
    },
    // 取消
    funcCancel() {
      this.$emit('fatherCancelMethod', 'edit')
    },
    handleLogoSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'logoImg', res.data)
    },
    handleWechatSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'wechatUrl', res.data)
    },
    handleShipperSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'shipperUrl', res.data)
    },
    handleShipperIosSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'shipperIosurl', res.data)
    },
    handleDriverSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'driverUrl', res.data)
    },
    handleDriverIosSuccess(res, file) {
      this.$message({ message: res.msg, type: 'success' })
      this.$set(this.form, 'driverIosurl', res.data)
    },
    // 上传验证
    beforeImgUpload(file) {
      const isJPG =
                    file.type === 'image/jpeg' ||
                    file.type === 'image/bmp' ||
                    file.type === 'image/png'
      const isLtnM = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG,BMP,PNG 格式!')
      }
      if (!isLtnM) {
        this.$message.error('上传图片大小不能超过 10MB!')
      }
      return isJPG && isLtnM
    }
  }
}
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
  }
</style>
